<script setup lang="ts">
import { ref } from 'vue'
const list = ref<number[]>([])
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  console.log(123)
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }
    // 加载状态结束
    loading.value = false
    // 数据全部加载完成
    if (list.value.length >= 40) {
      // finished.value = true
    }
  }, 1000)
}

// loading是加载中的布尔值默认是false, 但是在加载期间组件内部会设置为true, 一次加载结束后需要手动将loading设置为false(不然下一页数据展示不了)
// fininsed是控制加载结束的布尔值, 只要数据加载完毕了, 需要将finished设置true, 进而 finished-text也会展示出来
// load事件对应的处理函数
// 1. 默认会执行一次, 是否再次执行 看第一次请求回来的数据是否能占满内容区域, 如果没有占满再次执行
// 2. 当滚动到页面底部的时候会再次执行
</script>
<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</template>

<style scoped></style>
